
<template>
  <div class="dataset-container">
    <el-form label-width="100px">
      <el-form-item label="数据集：">
        <el-select v-model="formData.dataset.datasetName" placeholder="请选择" class="w-100pc" @change="dataChange">
          <el-option v-for="item in datasets" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="属性：">
        <el-select v-model="formData.dataset.property" placeholder="请选择" class="w-100pc" @change="dataChange">
          <el-option v-for="(item, index) in fields" :key="index" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="聚合方式：">
        <el-select v-model="formData.dataset.aggregate" placeholder="请选择" class="w-130" @change="aggregateChange">
          <el-option v-for="item in propertyHelper.aggregateList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary">自定义分组设置</el-button>
      </el-form-item>
      <el-form-item v-if="['select','group', 'customGroup'].indexOf(formData.dataset.aggregate)>=0" label="排序方式：">
        <el-radio v-model="formData.dataset.order" label="none" @change="dataChange">默认</el-radio>
        <el-radio v-model="formData.dataset.order" label="asc" @change="dataChange">正序</el-radio>
        <el-radio v-model="formData.dataset.order" label="desc" @change="dataChange">倒序</el-radio>
      </el-form-item>
      <el-form-item v-if="['select','group', 'customGroup'].indexOf(formData.dataset.aggregate)>=0" label="数据展开方向：" label-width="130px">
        <el-radio v-model="formData.dataset.expand" label="Down" @change="dataChange">下方</el-radio>
        <el-radio v-model="formData.dataset.expand" label="Right" @change="dataChange">向右</el-radio>
        <el-radio v-model="formData.dataset.expand" label="None" @change="dataChange">关闭</el-radio>
      </el-form-item>
      <el-form-item label="行高：">
        <el-input v-model="formData.dataset.lineHeight" type="text" placeholder="请输入一个数字,为空表示采用默认行高" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item label="换行计算：">
        <el-radio v-model="formData.dataset.wrapCompute" :label="true" @change="dataChange">打开</el-radio>
        <el-radio v-model="formData.dataset.wrapCompute" :label="false" @change="dataChange">关闭</el-radio>
      </el-form-item>
      <el-form-item label="格式化：">
        <el-select v-model="formData.dataset.format" placeholder="请选择" class="w-100pc" clearable @change="dataChange">
          <el-option v-for="item in propertyHelper.formatList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="补充空白行：">
        <el-radio v-model="formData.dataset.fillBlankRows" :label="true" @change="dataChange">打开</el-radio>
        <el-radio v-model="formData.dataset.fillBlankRows" :label="false" @change="dataChange">关闭</el-radio>
        <span v-if="formData.dataset.fillBlankRows">数据行倍数：</span>
        <el-input v-if="formData.dataset.fillBlankRows" v-model="formData.dataset.multiple" class="w-70" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item label="条件属性：">
        <el-button type="success" @click="showConditionDialog=true">设置条件</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import propertyHelper from "../components/propertyHelper.js";

export default {
  name: "filter-condition-tab",
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    datasets: {
      type: Array,
      default: () => {
        return [];
      }
    },
    fields: {
      type: Array,
      default: () => {
        return [];
      }
    },
    dataChange: {
      type: Function,
      default: () => {
        return () => {};
      }
    }
  },
  data () {
    return {
      propertyHelper
    };
  },
  watch: {
    "designer.cellDef": {
      handler: function () {
        this.dataInit();
      },
      deep: true
    }
  },
  methods: {
    // 初始化数据
    dataInit () {
      const { cellDef } = this.designer;
      if (!cellDef || !cellDef.value) return;
    },
    // 集合方式改变
    aggregateChange () {
      this.formData.dataset.order = "none";
      this.formData.dataset.expand = "None";
      this.dataChange();
    }
  }
};
</script>

<style lang="scss" scoped>
.dataset-container {
  padding-bottom: 20px;
  .el-form-item {
    margin-bottom: 5px;
  }
  ::v-deep .el-form-item__label {
    padding: 0;
  }
  ::v-deep .el-form--label-top .el-form-item__label {
    padding: 0 0 2px;
    line-height: 1.5;
  }
}
</style>
